<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>专题分类</title>
</head>

<body>
    <div id="follow" class="center">
        <!-- 左侧导航栏 -->
        <div class="leftNav">
            <ul>
                <li v-for="(u, index) in users" v-if="index == 0" class="active">
                    <a href="#" class="center">
                        <div class="headImage" :style='{"background-image":"url("+u.headImage+")"}'>
                            <span>{{u.name}}</span>
                        </div>
                        <div class="small gray" style="margin-left: 24px;">
                            <p>关注{{u.follows}}</p>
                            <p>粉丝{{u.fans}}</p>
                            <p>文章{{u.articles}}</p>
                        </div>
                    </a>
                </li>
                <li v-else>
                    <a href="#" class="center">
                        <div class="headImage" :style='{"background-image":"url("+u.headImage+")"}'>
                            <span>{{u.name}}</span>
                        </div>
                        <div class="small gray" style="margin-left: 24px;">
                            <p>关注{{u.follows}}</p>
                            <p>粉丝{{u.fans}}</p>
                            <p>文章{{u.articles}}</p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 右侧文章列表 -->
        <div th:include="listArticle"></div>
    </div>
    <script src="/js/follow.js"></script>
    <link rel="stylesheet" href="/css/follow.css">
</body>

</html>